import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import {rootState} from '../../store'
import { getSiteListAction } from '../../store/actionCreators'

interface SiteProps{
    sitelist:any,
    hostlist:any,
    getSiteListActionDispatch:()=>void
}

const Site:React.FC<SiteProps>=(props)=>{
    const [site,setSite]:any=useState([])
    const {
        sitelist,
        hostlist
    }=props
    const {
        getSiteListActionDispatch
    }=props
    useEffect(()=>{
        getSiteListActionDispatch()
        setSite(sitelist)
    },[])
    return(
        <div>
            {
                site.A.map((data: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null | undefined)=>(
                    <div>{data}</div>
                ))
            }
        </div>
    )
}
const mapStateToProps=(state:rootState)=>({
    sitelist:state.siteList.sitelist,
    hostlist:state.siteList.hostlist
})
const mapDispatchToProps=(dispatch:Dispatch)=>({
    getSiteListActionDispatch(){
       dispatch(getSiteListAction())
    }
})

export default connect(mapStateToProps,mapDispatchToProps)(Site) 